
// require.setHook('@/components/a', ()=>{
//   return 'a';
// });

define([
  '@/apis',
  'pages/favs/',
  'pages/index/',
  'pages/demo/',
  'pages/mycards/',
  'pages/game/'
], 
async function(
  apis,
  Favs,
  Index,
  Demo,
  Mycards,
  Game
) {

    const  { html, Component, render, linkState, Router } = preact;


    // let axios = await require('https://unpkg.com/axios/dist/axios.js');
    // let mitt = await require('https://unpkg.com/mitt/dist/mitt.umd.js');
    // let zzz = await require('https://unpkg.com/jquery@3.4.1/dist/jquery.js', ()=>{

    // });

    
    // let res = await axios.get('/')
    // console.log(res);

    class App extends Component {
        constructor(props){
          super(props)
          this.state = {
            //
            historyKey:''
          }

          console.env({title:"版本号",content: window.version})
          console.env({title:"环境",content: /^[\d\.]+$/.test(window.version) ? "正式环境":"开发环境"})
          // console.env({title:"当前appkey",content: window.env.appKey})
          // console.env({title:"当前host",content: window.env.host})


          //https://github.com/preactjs/preact-router
          //https://github.com/ReactTraining/history
          //https://github.com/ReactTraining/history/blob/master/docs/GettingStarted.md
          // this.history = Router.history.createHashHistory();
          this.history = Router.history.createMemoryHistory();


          this.history.listen((location, action) => {
            // 路由改变
            // location is an object like window.location
            // console.log(this.history, action, location.pathname, location.state);
            this.setState({
              historyKey : this.history.location.key
            })
          });


          this.updatePageType();
          
        }

        updatePageType(){
          const html = document.documentElement;
          const winheight = html.getBoundingClientRect().height;
          const deviceHeight = winheight / (window.rem/100) //lib/rem.js

          let type = 'normal';

          console.env({title:"按设计比例的实际高度", content: deviceHeight.toFixed(1)});
          
          // console.log(deviceHeight)

          if(deviceHeight < 1400){
            type = 'small'
          }else if(deviceHeight>= 1400 && deviceHeight < 1540){
            type = 'normal'
          }else{
            type = 'large'
          }

          console.env({title:"页面类型", content: type});

          this.setState({
            pageType: type
          })

        }

        async componentDidMount(){
          // if(this.history.location.pathname == "/"){
          //   Router.route('/demo', true);
          // }

          var info = Tida.appinfo;
          if(!(info.isTmall||info.isTaobao)){
              Tida.openClient( window.location.href );
          }

          let params = apis.params();
          // console.log(params);
          if(params.r){
            Router.route(`/${params.r}`, true);
          }
        }

   
        render({ }, { pageType }) {

          let props = {
            foo:"bar", history:this.history
          }

          console.log(this.history.index)

          return html`<div class="game-app page-${pageType}">

                  ${ this.history.length>0&&this.history.index!=0 ? html`<div class="goback" onclick=${()=>{
                    // console.log(this.history.index);
                    this.history.go(-1);
                  }}>返回</div>` : ''}
                  
                  <${Router} history=${this.history}>
                    <${Index} path="/"    ...${props}/>
                    <${Favs} path="/favs" ...${props}/>
                    <${Demo} path="/demo" ...${props}/>
                    <${Game} path="/game" ...${props}/>
                    <${Mycards} path="/mycards" ...${props}/>
                  <//>
              </div>
          `;
        }
      }
    
      
    render(html`<${App} />`, document.querySelector('#app'));

    return App;
});